<template>
  <div>
    <zbTable
      ref="tableRef"
      :api-fun="get_list"
      @getselection="getselection"
      @action="action"
    >
      <template #toolbar>
        <a-space>
          <template v-if="delArrShow">
            <a-button class="ele-btn-icon" @click="delArrHide()"
              ><span>取消</span></a-button
            >
            <a-button
              type="primary"
              danger
              ghost
              class="ele-btn-icon"
              @click="delArrFun()"
              ><span>确认删除</span></a-button
            >
          </template>
        </a-space>
      </template>
    </zbTable>
    <!-- 新建/编辑 弹窗 -->
    <user-edit
      v-if="showEdit"
      v-model:visible="showEdit"
      :actionStatus="actionStatus"
      :editDataId="editDataId"
      @done="done"
    />
    <!-- 回收站弹窗 -->
    <recycle
      v-if="showRecycle"
      v-model:visible="showRecycle"
      @done="reloadTable"
    />
    <a-modal
      v-model:visible="popconfirm"
      title="提示"
      centered
      :width="260"
      @ok="delFun"
      ><p>删除后请在回收站内恢复</p></a-modal
    >
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import zbTable from '@/components/zbTable/materialIndex.vue';
  import { message } from 'ant-design-vue';
  import { actionFn } from '@/utils/action.js';
  import { get_list, delArr } from '@/api/material/warehouse';
  import userEdit from './components/user-edit.vue';
  import recycle from './components/recycle.vue';

  const loading = ref(false);
  // 是否显示编辑弹窗
  const showEdit = ref(false);
  // 编辑数据
  const editDataId = ref(null);
  // 编辑按钮数据
  const actionData = ref({});
  const actionStatus = ref('add');
  const popconfirm = ref(false);
  const delArrShow = ref(false); //批量删除确认弹框
  const delArrData = ref([]); //批量删除的id
  const showRecycle = ref(false);

  // 获取子组件
  const tableRef = ref(null);

  const done = (form) => {
    actionFn(actionData.value, form, reloadTable);
  };
  const reloadTable = () => {
    showEdit.value = false;
    popconfirm.value = false;
    showRecycle.value = false;
    tableRef.value.reload();
  };

  //单个删除
  const delFun = () => {
    delArr({ id: delArrData.value })
      .then((res) => {
        message.success(res.msg);
        popconfirm.value = false;
        reloadTable();
        loading.value = false;
      })
      .catch((e) => {
        message.error(e);
        loading.value = false;
      });
  };
  const delArrHide = () => {
    tableRef.value.changeSelection(false);
    delArrShow.value = false;
  };
  const delArrOpt = () => {
    tableRef.value.changeSelection(true);
    delArrShow.value = true;
  };
  //批量删除
  const delArrFun = () => {
    delArr({ id: delArrData.value })
      .then((res) => {
        message.success(res.msg);
        delArrHide();
        reloadTable();
        loading.value = false;
      })
      .catch((e) => {
        message.error(e);
        loading.value = false;
      });
  };
  //获取选中的行
  const getselection = (val) => {
    delArrData.value = [];
    val.value.map((item) => {
      delArrData.value.push(item.id);
    });
  };

  const action = (data) => {
    if (data.action_data.type == 'add') {
      editDataId.value = '';
      showEdit.value = true;
      actionStatus.value = 'add';
      actionData.value = { url: data.row_data.url };
    }
    if (data.action_data.type == 'recycling') {
      showRecycle.value = true;
    }
    if (data.action_data.type == 'edit') {
      showEdit.value = true;
      actionStatus.value = 'edit';
      editDataId.value = data.row_data.id;
      actionData.value = { url: data.action_data.url };
    }
    if (data.action_data.type == 'delete') {
      if (data.action_data.mold == 'more') {
        delArrOpt();
      } else {
        delArrData.value = [];
        delArrData.value.push(data.row_data.id);
        popconfirm.value = true;
      }
    }
  };
</script>
